<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="__PUBLIC__/build/css/layui.css">
</head>
<style>
    body{
        background-color: #30323E;
        height: 100%;
        width: 100%;
    }
    .login_body{
        position:absolute;
        left:50%;
        top:45%;
        width:260px;
        height:auto;
        margin-left:-150px;
        margin-top:-150px;
        background:white;
        padding: 20px;
        border-radius: 3px;
    }
    .login_a{
        position: absolute;
        left: 130px;
        top:10px;
    }
    .login_btn{
        margin-top: 12px;
        width: 260px;
    }


    /* 重写layui */
    .layui-form-label{
        padding:9px 15px 9px 0px;
        width: 45px;
    }
    .layui-input-block{
        margin-left: 60px;
    }

    @media (min-width: 480px) and (max-width: 1980px) {
        .login_body{
            width:300px;
            margin-left:-170px;
            margin-top:-170px;
            padding: 20px;
        }
        .login_a{
            left: 150px;
        }
        .login_btn{
            width: 300px;
        }
        .login_code{
            width: 300px;
            height: 60px;
        }
    }
</style>
<body>
    <div class="login_body">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>修改密码</legend>
        </fieldset>
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-block">
                    <input name="password" lay-verify="required|password" autocomplete="off" required placeholder="请输入新密码" class="layui-input user" type="password">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">确认输入</label>
                <div class="layui-input-block">
                    <input name="repassword" lay-verify="required|repassword" autocomplete="off" required placeholder="请输入再次输入密码" class="layui-input password" type="password" maxlength="18">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-block">
                    <input name="verify" lay-verify="required|verify" autocomplete="off" required placeholder="请填写验证码" class="layui-input" type="text">
                </div>
            </div>
            <img class="login_code" src="{:U('Home/Public/verify')}" alt="" width="260" height="50">
            <input type="hidden" name="uniqid" value="{$_GET['uniqid']}" >
            <button class="layui-btn layui-btn-normal login_btn" lay-submit lay-filter="*">登录</button>
        </form>
    </div>
</body>
</html>
<script src="__PUBLIC__/build/layui.js"></script>
<script>
    layui.use('form', function(){
        var $ = layui.jquery,form = layui.form();

        //自定义验证规则
        form.verify({});

        //监听提交
        form.on('submit(*)', function(data){
            var btnName = $(data.elem).text();
            var submit = $(data.elem).attr('disabled',true).addClass('layui-btn-disabled').text('登录中');
            $.post(data.form.action, $(data.form).serialize() , function (data) {
                submit.attr('disabled',false).removeClass('layui-btn-disabled').text(btnName);
                reloadVerify();
                if(data.error == 0){
                    layer.msg(data.msg, function () {
                        if(data.url){
                            window.location.href = data.url;
                        }
                    });
                }else{
                    layer.msg(data.msg);
                }
            });
            return false;
        });

        $(function () {
            //刷新验证码
            $('.login_code').click(function () {
                reloadVerify();
            });
        });

        /**
         * 重新加载验证码
         * @param obj
         */
        function reloadVerify(){
            var obj = $('.login_code');
            var verifyimg = obj.attr("src");
            if( verifyimg.indexOf('?')>0){
                obj.attr("src", verifyimg+'&random='+Math.random());
            }else{
                obj.attr("src", verifyimg.replace(/\?.*$/,'')+'?'+Math.random());
            }
        }
    });
</script>